{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>车辆管理系统</title>
    <link href="{% static 'admin/images/logo.png' %}" rel="icon">
    <link rel="stylesheet" href="{% static 'admin/css/pearForm.css' %}"/>
    <link rel="stylesheet" href="{% static 'component/layui/css/layui.css' %}"/>
    <link rel="stylesheet" href="{% static 'admin/css/pearButton.css' %}"/>
    <link rel="stylesheet" href="{% static 'assets/login.css' %}"/>
</head>
<body background="{% static 'admin/images/background.svg' %}">
{#<body background="{% static 'admin/images/logo.png' %}">#}
<form class="layui-form" method="">
    <!-- {% csrf_token %} -->
    <div class="layui-form-item">
        <img class="logo" src="{% static 'admin/images/logo.png' %}"/>
        <div class="title">车辆管理系统</div>
{#        <div class="desc">#}
{#            车辆管理系统#}
{#        </div>#}
    </div>
    <div class="layui-form-item">
        <input placeholder="手机号 " class="layui-input" name="phone" lay-verify="required|phone"/>
    </div>
    <div class="layui-form-item">
        <input type="password" placeholder="密 码 " hover class="layui-input" name="password" lay-verify="required"/>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" placeholder="验证码" hover class="layui-input" name="ver_code" lay-verify="required"/>
        </div>
        <div class="">
            <a onclick="get_verify_code()" style="cursor:pointer;">
                <img class="layui-img" id="verify_code" style="width: 120px; height: 44px;">
            </a>
        </div>
      </div>
    <div class="layui-form-item">
        <input type="checkbox" name="remember_pass" title="记住密码" lay-skin="primary" checked>
    </div>
    <div class="layui-form-item">
        <button type="button" style="background-color: #1C84C6!important;" class="pear-btn pear-btn-primary login" lay-submit="" lay-filter="user-login">
            登 录
        </button>
    </div>
</form>
<script src="{% static 'component/layui/layui.js' %}"></script>
<script src="{% static 'component/my.js' %}"></script>
<script>
    layui.use(['form', 'element', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        window.jquery = layui.jquery

        // 用户名
        $("input[name=username]").val(window.localStorage.username)
        $("input[name=password]").val(window.localStorage.password)
        // 验证码
        get_verify_code()

        // 回车键触发登录
        $("body").keyup(function(event){
            if (event.keyCode == 13){
                $(".login").click()
            }
        })

        form.on('submit(user-login)', function (data) {
            window.localStorage.username = $("input[name=username]").val();
            if ($("input[name=remember_pass]").is(":checked")){
                window.localStorage.password = $("input[name=password]").val();
            }else{
                window.localStorage.password = ""
            }
            $.ajax({
                url: "{% url 'user:login' %}",
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                headers: {
                    "X-CSRFToken": getCookie("csrftoken")
                },
                success: function (result) {
                    console.log(result)
                    if (result.status == 1) {
                        layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                            window.location.href = "{% url 'home:index' %}"
                        });
                    } else {
                        layer.msg(result.msg, { icon: 2, time: 3000 });
                        $("input[name=ver_code]").val("")
                        get_verify_code()
                    }
                }
            })
            return false;
        });

        
    })

    function get_verify_code(){
        let $ = window.jquery
        $.ajax({
            url: "{% url 'home:verify_code' %}",
            type: 'get',
            success: function (result) {
                console.log(result)
                if (result.status == 1) {
                    $("#verify_code").attr("src", "{% static 'verify_code' %}" + "/" + result.file_url)
                } else {
                    layer.msg(result.msg, { icon: 2, time: 3000 });
                }
            }
        })
    }
    

</script>
</body>
</html>
